<template>
	<view>
		<canvas type="2d" canvas-id="xprogress" id="xprogress" canvasId='xprogress'
			:style="[`width:${props.width}px`, `height:${props.height}px`]"></canvas>
	</view>
</template>

<script setup>
	import { defineProps, watch, getCurrentInstance, defineExpose, onMounted } from "vue";
	import { onReady } from "@dcloudio/uni-app";
	const props = defineProps({
		width: {
			default: 100,
			type: Number
		},
		height: {
			default: 100,
			type: Number
		},
		value: {
			default: 0,
			type: Number
		},
		bgColor: {
			default: '#FFFFFF',
			type: String
		},
		progressColor: {
			default: '#ff560e',
			type: String
		},
		color: {
			default: '#FFFFFF',
			type: String
		},
		lineWidth: {
			default: 16,
			type: Number
		},
	})
	watch(() => props.value, (v) => {
		animate(v);
	})
	let ctx, canvas, centerX, centerY, radius, gradient;
	onMounted(()=>{
		// #ifdef H5
		ctx = uni.createCanvasContext('xprogress')
		ctx.lineJoin = 'miter';
		centerX = props.width / 2;
		centerY = props.height / 2;
		radius = (props.width / 2) - props.lineWidth;
		// 进度条的渐变颜色
		gradient = ctx.createLinearGradient(0, 0, props.width, 0);
		gradient.addColorStop(0, 'white');
		gradient.addColorStop(1, props.progressColor);
		drawProgress(props.value);
		// #endif
	})
	onReady(() => {
		// #ifdef MP-WEIXIN
		const query = uni.createSelectorQuery().in(getCurrentInstance());
		query.select('#xprogress')
			.fields({
				node: true,
				size: true
			})
			.exec((res) => {
				canvas = res[0].node
				ctx = canvas.getContext('2d')
				ctx.lineJoin = 'miter';
				canvas.width = props.width;
				canvas.height = props.height;
				centerX = props.width / 2;
				centerY = props.height / 2;
				radius = (props.width / 2) - props.lineWidth;

				// 进度条的渐变颜色
				gradient = ctx.createLinearGradient(0, 0, props.width, 0);
				gradient.addColorStop(0, 'white');
				gradient.addColorStop(1, props.progressColor);
				drawProgress(props.value);
			});
		// #endif
		
	})
	const drawProgress = (progress) => {
		ctx.clearRect(0, 0, props.width, props.height);
		ctx.lineJoin = 'bevel'
		// 画背景圆环
		ctx.beginPath();

		ctx.arc(centerX, centerY, radius, Math.PI, Math.PI * 2);
		ctx.lineWidth = props.lineWidth;
		ctx.strokeStyle = props.bgColor
		ctx.lineCap = 'round'; // 让进度条的两端是圆形的
		ctx.stroke();
		if (progress > 0) {
			// 画进度条
			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + Math.PI * progress / 100);
			ctx.strokeStyle = gradient;
			ctx.lineWidth = props.lineWidth - 8;
			ctx.lineCap = 'round'; // 让进度条的两端是圆形的
			ctx.stroke();
		}
		ctx.beginPath();
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.font = `bold ${props.width / 5}px Arial`;
		const l = ctx.measureText(progress).width;
		ctx.fillStyle = props.color;
		ctx.fillText(progress, centerX, centerY * 0.8);
		let x = 0;

		switch (progress.toString().length) {
			case 1:
				x = l
				break;
			case 2:
				x = l / 1.3;
				break;
			case 3:
				x = l / 1.5
				break;
			default:
				x = l
		}
		ctx.font = `bold ${props.width / 10}px Arial`;
		ctx.fillText('%', centerX + x, centerY * 0.8);
		ctx.font = `bold ${props.width / 15}px Arial`;
		ctx.fillText('正确率', centerX, centerY * 1.2);
		// #ifdef H5
		ctx.draw()
		// #endif
	}
	const animate = (progress) => {
		let p = 0;
		let timer = setInterval(() => {
			drawProgress(p);
			if (p >= 100 || p >= progress) {
				clearInterval(timer);
			}
			p++;
		}, 10);
	}
	defineExpose({
		animate
	})
</script>

<style></style>